<template>
  <view class="return">
    <navigation back title="申请退款" />

    <view class="page-container">
      <view class="container">
        <!-- 服务信息 -->
        <serviceInfo />

        <!-- 退款金额 -->
        <view class="return-num">
          <view class="title flex flex-middle flex-between">
            <view class="left flex flex-middle">
              <view class="icons">
                <view class="flex flex-middle flex-center">￥</view>
              </view>
              退款金额
            </view>

            <view class="right"> 最多¥586.0 </view>
          </view>

          <view class="input-view flex flex-middle">
            <text>￥</text>
            <input class="input flex-1" placeholder="请输入退款金额" />
          </view>
        </view>

        <!-- 退款原因 -->
        <view class="reason">
          <view class="title flex flex-middle flex-left">
            <text>*</text>
            请选择退款原因
          </view>

          <u-radio-group
            iconPlacement="right"
            placement="column"
            activeColor="#FE774C"
          >
            <u-radio
              class="radio-item"
              v-for="(item, index) in seasonList"
              :key="index"
              :label="item"
            />
          </u-radio-group>
        </view>
      </view>
    </view>

    <!-- 操作栏 -->
    <view class="bottom-view safe-bottom">
      <view class="bottom safe-bottom">
        <view class="page-container">
          <view class="bottom-container flex flex-middle flex-between">
            <text>部分退款，优惠券抵扣生效</text>

            <view class="flex flex-middle">
              <view class="btn btn1 flex flex-middle flex-center">
                取消退款
              </view>
              <view class="btn btn2 flex flex-middle flex-center">
                提交申请
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import serviceInfo from "./components/serviceInfo";

export default {
  components: {
    serviceInfo,
  },
  data() {
    return {
      seasonList: [
        "个人信息填错了",
        "想更换套餐",
        "与客服协商一致退款",
        "计划临时有变，不考虑下单了",
        "觉得价格有点贵",
        "其他",
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.bottom-view {
  height: 64px;

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    width: 100vw;
    box-shadow: 0px 0px 8px 0px rgba(218, 218, 218, 0.5);

    .btn1 {
      border-color: #232323;
      color: #232323;
    }

    .btn2 {
      border-color: #232323;
      background: #232323;
      color: #fff;
    }

    .btn {
      height: 32px;
      width: 88px;
      border: 1px solid;
      border-radius: 17px;
      font-weight: bold;
      margin-left: 8px;
    }

    text {
      color: #8a8a8a;
      font-size: 12px;
    }

    &-container {
      padding: 0 16px;
      height: 64px;
    }
  }
}

.return {
  min-height: 100vh;
  background: #f6f6f6;
}

.reason {
  margin-top: 24px;

  .radio-item {
    margin-top: 20px;
  }

  .title {
    color: #999;

    text {
      color: #ea473f;
    }
  }
}

.return-num {
  padding: 0 16px;
  background: #fff;
  border-radius: 6px;
  margin-top: 12px;

  .input-view {
    height: 38px;
    color: #ea473f;

    text {
      font-size: 12px;
      margin-bottom: -4px;
    }

    .input {
      font-size: 17px;
      height: 100%;
    }
  }

  .title {
    color: #222;
    height: 38px;
    border-bottom: 1px solid #efefef;

    .left {
      padding-left: 7px;
    }

    .icons {
      position: relative;
      background: linear-gradient(202deg, #ff9b59 0%, #ff8481 100%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 2px;

      view {
        position: absolute;
        right: 3px;
        top: -2px;
        background: rgba(255, 229, 217, 0.66);
        backdrop-filter: blur(1px);
        width: 16px;
        height: 16px;
        color: #fff;
        font-weight: bold;
        border-radius: 50%;
      }
    }

    .right {
      font-size: 12px;
      color: #8a8a8a;
    }
  }
}

.container {
  padding: 16px;
}
</style>